<template>
  <div class="add-coupon">
    <div class="top">{{txtVal}}</div>
    <div class="bottom">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="名称:">
          <el-input
            :readonly="!showBtn"
            v-model="form.name"
            size="medium"
            style="width: 300px"
            placeholder="请输入优惠券名称"
          />
        </el-form-item>
        <el-form-item label="选择门店:">
          <el-radio :disabled="!showBtn" v-model="radio" label="1">欧丽洛雅吴中路商场</el-radio>
          <el-radio :disabled="!showBtn" v-model="radio" label="2">全球家居1号店</el-radio>
        </el-form-item>
        <el-form-item label="使用对象:">
          <el-radio :disabled="!showBtn" v-model="radio1" label="1">设计师</el-radio>
          <el-radio :disabled="!showBtn" v-model="radio1" label="2">用户</el-radio>
        </el-form-item>
        <el-form-item label="使用范围:">
          <el-radio :disabled="!showBtn" v-show="radio1 == '1'" v-model="radio2" label="1">全场通用</el-radio>
          <el-radio :disabled="!showBtn" v-model="radio2" label="2">指定品牌</el-radio>
        </el-form-item>
        <el-form-item v-if="radio1 == 2" label="有效期:">
          <el-date-picker
            :disabled="!showBtn"
            @change="datePickChange"
            value-format="yyyy-MM-dd"
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="面值:">
          <el-input :readonly="!showBtn" v-model="form.discount_money" size="medium" />
          <span class="yuan">元</span>
        </el-form-item>
        <el-form-item label="使用门槛:" style="white-space: nowrap">
          <el-input
            type="textarea"
            style="width: 400px"
            :readonly="!showBtn"
            maxlength="46"
            show-word-limit
            v-model="form.discount_limit"
            placeholder="请输入使用门槛"
            size="medium"
          />
          <!-- <span class="yuan">元</span> -->
        </el-form-item>
        <el-form-item label="张/人:">
          <el-input
            :readonly="!showBtn"
            v-model="form.get_limit"
            size="medium"
            style="width: 300px"
            placeholder="请输入张数"
          />
        </el-form-item>
        <el-form-item v-if="radio2 == 2" label="使用品牌:" class="brand">
          <el-button type="primary" :disabled="!showBtn" @click="selectBrand">选择品牌</el-button>
          <div class="table-select mt-10">
            <el-table :data="multipleSelection" style="width: 100%">
              <el-table-column prop="id" label="ID" width="180" />
              <el-table-column prop="name" label="品牌信息" width="180">
                <template slot-scope="scope">
                  <div class="d-flex">
                    <el-avatar shape="square" :size="50" :src="scope.row.cover" />
                    <p class="ml-10">{{ scope.row.name }}</p>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                  <div v-show="!showBtn">
                    <span class="col-blue">删除</span>
                  </div>
                  <div v-show="showBtn">
                    <span class="col-blue" @click="delCheck(scope.row)">删除</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item v-if="showBtn">
          <el-button type="primary" @click="saveForm">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <Dialog ref="brandDialog" title="选择品牌" class="dialog" @closeDialog="handleClose">
      <Input placeholder="请输入品牌名称" @search="handleSearch" />
      <div class="table" style="height:500px;overflow-y:scroll;">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="ID" width="180" />
          <el-table-column prop="name" label="品牌信息" width="180">
            <template slot-scope="scope">
              <div class="d-flex">
                <el-avatar shape="square" :size="50" :src="scope.row.cover" />
                <p class="ml-10">{{ scope.row.name }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <div>
                <span class="col-blue" @click="chooseCoupon(scope.row)">选择</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <Pagination
        ref="dialog"
        class="pagination"
        :total="total"
        :cur-page="page"
        @nextPage="handleNextPage"
      />
    </Dialog>
  </div>
</template>
<script>
import { getBrandList } from "@/api/http/brand";
import { addCoupon } from "@/api/http/coupon";
import Dialog from "@/common/dialog";
import Input from "@/common/input";
import Pagination from "@/common/pagination";
export default {
  components: {
    Dialog,
    Input,
    Pagination
  },
  data() {
    return {
      id: 0,
      txtVal: "添加优惠券",
      showBtn: true,
      radio: "1",
      radio1: "1",
      radio2: "1",
      value1: "",
      total: 10,
      page: 1,
      form: {
        start_at: "",
        end_at: ""
      },
      query: "",
      couponMes: {},
      multipleSelection: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ]
    };
  },
  watch: {
    radio1: {
      handler: function(val) {
        this.radio2 = "2";
      },
      immediate: true
    },
    radio: {
      handler: function(val) {
        this.getBrandList();
      },
      immediate: true
    }
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query;
      this.txtVal = "编辑优惠券";
      if (this.$route.query.num == 2) {
        this.showBtn = false;
      }
    }
    if (JSON.parse(window.localStorage.getItem("couponMes")) && this.id != 0) {
      this.form = JSON.parse(window.localStorage.getItem("couponMes"));
      this.multipleSelection.push(this.form.brand);
    }
    // 获取品牌列表
    this.getBrandList();
  },
  methods: {
    // 选择优惠券
    chooseCoupon(row) {
      this.couponMes = row;
      console.log(this.couponMes, "---888");
      this.multipleSelection.push(this.couponMes);
      this.$refs.brandDialog.cancel();
    },
    datePickChange(val) {
      if (val) {
        this.form.start_at = val[0];
        this.form.end_at = val[1];
      } else {
        this.form.start_at = "";
        this.form.end_at = "";
      }
      console.log(this.form.start_at, "---start_at");
    },
    // 保存
    saveForm() {
      if (!this.form.name) {
        this.$message("请填写优惠券名称");
        return;
      }
      if (!this.form.start_at && this.radio1 == 2) {
        // 只有用户的时候设置优惠券有效期
        this.$message("请设置优惠券有效期");
        return;
      }
      if (!this.form.discount_money) {
        this.$message("请设置优惠券面值");
        return;
      }
      if (!this.form.discount_limit) {
        this.$message("请设置优惠券门槛");
        return;
      }
      if (!this.form.get_limit) {
        this.$message("请设置张数");
        return;
      }
      if (this.radio2 == 2 && !this.couponMes.id) {
        this.$message("请选择品牌");
        return;
      }
      var params = {
        name: this.form.name,
        type: this.radio2,
        user_type: this.radio1,
        shop_id: this.radio,
        start_at: this.form.start_at,
        end_at: this.form.end_at,
        discount_limit: this.form.discount_limit,
        discount_money: this.form.discount_money,
        get_limit: this.form.get_limit,
        brand_id: this.couponMes.id
      };
      console.log(params, "---params---44");
      addCoupon(params).then(res => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          this.$router.go(-1);
        }
      });
    },
    // 删除已选择的品牌
    delCheck(row) {
      console.log(row, "---row");
      this.multipleSelection = [];
      this.couponMes = {};
      this.$forceUpdate();
    },
    // 请选择品牌
    handleClose() {
      this.$refs.brandDialog.show();
      if (!this.couponMes.id) {
        this.$message("请选择品牌");
        return;
      }
      console.log(this.couponMes, "----88");
      this.$refs.brandDialog.cancel();
    },
    // 获取当前的页码
    handleNextPage(e) {
      console.log(e, "---e---88");
      this.page = e;
      this.getBrandList();
    },
    getBrandList() {
      getBrandList({ page: this.page, keywords: this.query }).then(res => {
        // console.log(res, "---res");
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.checkBrand();
        }
      });
    },
    checkBrand() {
      var list = [];
      this.tableData.map(res => {
        if (res.information) {
          var status = res.information.some(res => {
            return res.shop_id == this.radio;
          });
          if (status) {
            list.push(res);
          }
        }
      });
      this.tableData = list;
      this.total = this.tableData.length;
    },
    handleSearch(query) {
      this.query = query;
      this.getBrandList();
    },
    selectBrand() {
      this.$refs.brandDialog.show();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-pagination.scss";
@import "@/styles/el-table.scss";
@import "@/styles/color.scss";
@import "@/styles/el-button.scss";
.mt-10 {
  margin-top: 10px;
}
.d-flex {
  display: flex;
  align-items: center;
}
.top {
  line-height: 40px;
  color: rgba(68, 68, 68, 1);
  font-size: 18px;
  text-align: left;
  font-weight: bold;
  font-family: Roboto;
}
.ml-10 {
  margin-left: 10px;
}
.table {
  margin-top: 20px;
}
.dialog /deep/ .el-dialog {
  width: 700px !important;
}
.yuan {
  position: absolute;
  top: 0;
  right: 7px;
  color: #101010 !important;
}
.el-form /deep/ .el-form-item__content {
  width: 200px;
}
.brand /deep/ .el-form-item__content {
  width: 600px;
}
</style>
